<template>
    <div style="padding:10px;background-color: white;">
        <Search @submit="handleSearch" @reset="handleReset">
            <AFormItem label="类型ID">
                <AInput v-model:value="state.formData.id" />
            </AFormItem>
            <AFormItem label="类型名称">
                <AInput v-model:value="state.formData.title" />
            </AFormItem>
            <AFormItem label="促销对象" name="scope">
            <ASelect v-model:value="state.formData.scope" name="scope">
                <ASelectOption :value="scopeEnum.WholeOrder">整单</ASelectOption>
                <ASelectOption :value="scopeEnum.Category">品类</ASelectOption>
                <ASelectOption disabled :value="scopeEnum.Packages" title="暂不支持">套餐</ASelectOption>
                <ASelectOption :value="scopeEnum.Single">单品</ASelectOption>
            </ASelect>
        </AFormItem>
            <AFormItem label="门槛类型">
                <ASelect v-model:value="state.formData.threshold">
                    <ASelectOption :value="thresholdEnum.Quantity">满数量</ASelectOption>
                    <ASelectOption :value="thresholdEnum.Amount">满金额</ASelectOption>
                </ASelect>
            </AFormItem>
            <AFormItem label="门槛类型">
                <ASelect v-model:value="state.formData.type">
                    <ASelectOption :value="preferentialEnum.Subtraction">减钱</ASelectOption>
                    <ASelectOption :value="preferentialEnum.Discount">打折</ASelectOption>
                    <ASelectOption :value="preferentialEnum.Special">特价</ASelectOption>
                    <ASelectOption :value="preferentialEnum.Gift">赠品</ASelectOption>
                    <ASelectOption :value="preferentialEnum.Exchange">加钱购</ASelectOption>
                </ASelect>
            </AFormItem>
            <AFormItem label="门槛状态">
                <ASelect v-model:value="state.formData.status">
                    <ASelectOption :value="promoTypeStatusEnum.Start">启用</ASelectOption>
                    <ASelectOption :value="promoTypeStatusEnum.Stop">禁用</ASelectOption>
                </ASelect>
            </AFormItem>    
        </Search>
    </div>
    <div style="padding:10px;margin-top:10px;background-color: white;">
        <div class="mb-10">
            <AButton type="primary" :currentPromo="state.currentPromo" @click="addPromo">新增促销类型</AButton>
        </div>
        <ATable :data-source="state.dataSource" :columns="columns" bordered :pagination="false"></ATable>
        <Pagination :pagination="state.pagination" @change="pageChange"></Pagination>
    </div>
    <PromoModal 
    :current-promo="state.currentPromo" 
    v-if="state.promoModalVisibel"
    @cancel="cancelPromoModal"
    @ok="promoModalOk"></PromoModal>
</template>
<script lang="ts" setup>
import {reactive,h} from "vue";
import Search from '@/components/Search/Search.vue';
import Pagination from "@/components/Pagination/index.vue";
import { PromoTypes,CommontTypes, PageResult, ResponseVo} from "@/type"
import { PromoService } from "@/service";
import PromoModal from "./components/PromoModal.vue"
import {Button} from "ant-design-vue";
import { dataTypeEnum, preferentialEnum, promoTypeStatusEnum, thresholdEnum,scopeEnum } from "@/type/enum";

const columns = [
    {title:"类型编码",dataIndex:"id"},
    {title:"类型名称",dataIndex:"title"},
    {title:"促销对象",dataIndex:"scope",customRender:({record}:{record:PromoTypes.IPromoItem})=>{
        let renderText = "";
        if(record.scope === scopeEnum.WholeOrder)renderText = "整单";
        if(record.scope === scopeEnum.Category)renderText = "品类";
        if(record.scope === scopeEnum.Packages)renderText = "套餐";
        if(record.scope === scopeEnum.Single)renderText = "单品";
        return h('div',{},`${renderText}`)
    }},
    {title:"门槛",dataIndex:"threshold",customRender:({record}:{record:PromoTypes.IPromoItem})=>{
        let renderText = "";
        if(record.threshold===thresholdEnum.Amount){
            renderText = "满金额";
        }
        if(record.threshold===thresholdEnum.Quantity){
            renderText = "满数量";
        }
        return h('div',{},`${renderText}`)
    }},
    {title:"主优惠内容",dataIndex:"type",customRender:({record}:{record:PromoTypes.IPromoItem})=>{
        let renderText = "";
        let mianGear = record.promoGears?.find(gear=>gear.dataType==dataTypeEnum.Main);
        let type = mianGear?.type;
        if(type===preferentialEnum.Subtraction)renderText = "减钱";
        if(type===preferentialEnum.Discount)renderText = "打折";
        if(type===preferentialEnum.Special)renderText = "特价";
        if(type===preferentialEnum.Gift)renderText = "赠品";
        if(type===preferentialEnum.Exchange)renderText = "加钱购";
        return h('div',{},`${renderText}`)
    }},
    {title:"状态",dataIndex:"status",customRender:({record}:{record:PromoTypes.IPromoItem})=>{
        return h('div',{},`${record.status===promoTypeStatusEnum.Start?'启用':'禁用'}`)
    }},
    {title:"创建人",customRender:({record}:{record:PromoTypes.IPromoItem})=>{
        return h('div',{},`${record.creator}/${record.createTime}`)
    }},
    {title:"修改人",customRender:({record}:{record:PromoTypes.IPromoItem})=>{
        return h('div',{},`${record.updator}/${record.updateTime}`)
    }},
    {title:"操作",customRender:({record}:{record:PromoTypes.IPromoItem})=>{
        return h('div',{},[
            h(Button,{type:"text",onClick:()=>editPromo(record)},"编辑")
        ])
    }}
]

const state = reactive<{
    formData: PromoTypes.PagePromoType,
    pagination:CommontTypes.IPagination,
    dataSource:PromoTypes.IPromoItem[],
    promoModalVisibel: boolean,
    currentPromo:Partial<PromoTypes.IPromoItem>
}>({
    formData:{},
    pagination:{
        pageNum:1,
        pageSize:10,
        total:0
    },
    dataSource:[],
    promoModalVisibel: false,
    currentPromo:{}
})

const handleSearch = async()=>{
    const res:ResponseVo<PageResult<PromoTypes.IPromoItem>>= await PromoService.pagePromo({...state.formData,...state.pagination});
    if(res.code===0){
        state.dataSource = res.data.list;
        state.pagination.total = res.data.total;
    }
}

const pageChange = (page:number,size:number)=>{
    state.pagination.pageNum = page;
    state.pagination.pageSize = size;
    handleSearch();
}

const handleReset = ()=>{
    state.formData = {};
    state.pagination.pageNum=1;
    state.pagination.total=0;
    handleSearch();
}

const addPromo = ()=>{
    state.promoModalVisibel = true;
    state.currentPromo = {};
}

const editPromo = async(record:PromoTypes.IPromoItem)=>{
    state.currentPromo ={};
    let res:ResponseVo<PromoTypes.IPromoItem> =await PromoService.detailPromo(record.id);
        console.log(res)
    if(res.code===0){
        state.currentPromo = {...res.data};
        console.log("state.currentPromo--->",state.currentPromo);
        state.promoModalVisibel = true;
    }
}

const cancelPromoModal = ()=>{
    state.promoModalVisibel = false;
}

const promoModalOk = ()=>{
    state.promoModalVisibel = false;
    state.pagination.pageNum=1;
    handleSearch();
}

</script>
<style lang="ts" setup>

</style>